<template>
  <div>
    <Upload ref="upload" multiple type="drag" action="/pub/configure/uploadFile" v-if="isEdit"
            :on-success="handleSuccess" :on-error="handleError" :format="['doc','docx','pdf']" :default-file-list="uploadList"
            :max-size="5120" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :on-preview="clickItem" :on-remove="deleteItem">
      <div style="padding: 20px">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p style="color:red;">请上传5M以下的word或pdf</p>
      </div>
    </Upload>
    <div v-if="!isEdit">
      <template v-if="uploadList.length >0">
        <div v-for="(item,index) in uploadList" :key="index">
          <div style="cursor: pointer;color: #1e88e5" @click="clickItem(item)">{{item.name}}</div>
        </div>
      </template>
      <template v-else>
        <div>暂无数据</div>
      </template>
    </div>
  </div>

</template>
<script>
export default {
  props:{
    attachmentPdf:{
      type:Object,
      default:{}
    },
    value:{
      type:String,
      default: ''
    },
    pdfArr:{
      type: Array,
      default:[]
    },
    isEdit:{
      type:Boolean,
      default:false
    }
  },
  watch:{
    pdfArr(val) {
      this.uploadList = val;
    },
  },
  data() {
    return {
      uploadList: []
    };
  },
  methods: {
    handleSuccess(res,file) {
      if (res.result.retCode === 0) {
        this.uploadList.push({name:file.name,url:res.data.fileName});
        this.$emit("upload", this.uploadList);
      } else {
        this.$Message.error(res.result.retMessage);
      }

    },
    handleError(error, file) {
      this.$Message.error(file.message);
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: file.name + "文件格式不正确，请选择DOC,DOCX,PDF。"
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "超过文件大小限制",
        desc: "文件  " + file.name + " 太大，不能超过5M。"
      });
    },
    clickItem(file) {
        let link = document.createElement('a');
        link.href = file.url;
        link.download = file.name;
        link.click();
    },
    deleteItem(file, fileList){
        this.uploadList.forEach((x,index) => {
          if(x.url === file.url) {
            this.uploadList.splice(index, 1)
          }
        });
      this.$emit('deleteUrl',this.uploadList)

    }
  },
  mounted() {
  }
};
</script>
<style>
.demo-upload-list {
  display: inline-block;
  height: 146px;
  text-align: center;
  line-height: 146px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  height: 146px;
  width: 146px;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
